<template>  
	<view class="uni-container">  
		<!-- 操作工具栏 -->  
		<view class="uni-toolbar">  
			<button class="uni-button primary" @click="openDialog(false,'')">  
				<text class="iconfont icon-add"></text> 新增客户  
			</button>  
			<!-- <button class="uni-button default" @click="handleExport">  
				<text class="iconfont icon-export"></text> 导出数据  
			</button>  -->
		</view> 

		<!-- 筛选表单 -->  
		<view class="uni-filter-box">  
			<view class="uni-filter-item" v-for="(item, index) in filterFields" :key="index">  
				<text class="uni-filter-label">{{ item.label }}</text>  
				<input class="uni-input" v-model="formData[item.prop]" :placeholder="item.placeholder" />  
			</view>  
			<button class="uni-button search" @click="submitForm">  
				<text class="iconfont icon-search"></text> 搜索  
			</button>  
		</view>  

		<!-- 客户数据表格 -->  
		<uni-table ref="table" :loading="loading" border stripe type="selection" :data="tableData" empty-text="暂无客户数据"  
			@selection-change="selectionChange">  
			<!-- 表头 -->  
			<uni-tr>  
				<uni-th width="100" align="center" v-for="(col, idx) in tableColumns" :key="idx">  
					{{ col.title }}  
				</uni-th>  
				<uni-th width="120" align="center">操作</uni-th>  
			</uni-tr>  
			<!-- 表格内容 -->  
			<uni-tr v-for="(item, index) in tableData" :key="index">  
				<uni-td align="center" v-for="(col, colIdx) in tableColumns" :key="colIdx">  
					<template v-if="col.formatter">  
						{{ col.formatter(item[col.prop]) }}  
					</template>  
					<template v-else>  
						{{ item[col.prop] }}  
					</template>  
				</uni-td>  
				<uni-td>  
					<view class="uni-group">  
						<button class="uni-button mini primary" @click="openDialog(true,item)">修改</button>  
						<button class="uni-button mini danger" @click="deleteRow(item)">删除</button>  
					</view>  
				</uni-td>  
			</uni-tr>  
		</uni-table>  

		<!-- 分页组件 -->  
		<view class="uni-pagination-box">  
			<uni-pagination show-icon :page-size="formData.pageSize" :current="formData.pageNum" :total="total"  
				@change="changePage" />  
		</view>  

	
	</view>  
</template>  

<script>
	import {
		add,
		list,
		update
	} from "@/api/returndollar";
	export default {
		data() {
			return {
				loading: false,
				total: 0,
				formData: {
					customerName: '',
					followStatus: '',
					clientProperty: '',
					pageNum: 1,
					pageSize: 10
				},
				
				tableColumns: [  
				    
				    {  
				        prop: 'clientNumber',  
				        title: '客户编号',  
				        width: 100  
				    },  
				    {  
				        prop: 'clientName',  
				        title: '客户名称',  
				        width: 100  
				    },  
				    {  
				        prop: 'contactAddress',  
				        title: '联系地址',  
				        width: 120  
				    },  
				    {  
				        prop: 'contactPerson',  
				        title: '联系人',  
				        width: 100  
				    },  
				    {  
				        prop: 'phoneNumber',  
				        title: '手机号',  
				        formatter: this.formatPhone,  
				        width: 100  
				    },  
				    {  
				        prop: 'clientManager',  
				        title: '客户经理',  
				        width: 100  
				    },  
				    {  
				        prop: 'followStatus',  
				        title: '跟进状态',  
				        width: 100  
				    },  
				    {  
				        prop: 'industry',  
				        title: '所属行业',  
				        width: 100  
				    },  
				    {  
				        prop: 'clientProperty',  
				        title: '客户属性',  
				        width: 100  
				    },  
				    {  
				        prop: 'lastCommunicationDate',  
				        title: '最后沟通时间',  
				        formatter: this.formatDate,  
				        width: 120  
				    } 
				],
				filterFields: [{
						prop: 'customerName',
						label: '客户名称',
						placeholder: '输入名称筛选'
					},
					{
						prop: 'followStatus',
						label: '跟进状态',
						placeholder: '输入状态筛选'
					},
					{
						prop: 'clientProperty',
						label: '客户属性',
						placeholder: '输入属性筛选'
					}
				],
				currentForm: {
					id:'',
					clientNumber: '',
					clientName: '',
					contactAddress: '',
					contactPerson: '',
					phoneNumber: '',
					clientManager: '',
					followStatus: '',
					industry: '',
					clientProperty: '',
					lastCommunicationDate: ''
				},
				
				formFields: [  
					{ prop: 'clientNumber', label: '客户编号', placeholder: '请输入客户编号', required: true },  
					{ prop: 'clientName', label: '客户名称', placeholder: '请输入客户名称', required: true },  
					{ prop: 'contactAddress', label: '联系地址', placeholder: '请输入联系地址' },  
					{ prop: 'contactPerson', label: '联系人', placeholder: '请输入联系人' },  
					{ prop: 'phoneNumber', label: '手机号', placeholder: '请输入手机号', required: true },  
					{ prop: 'clientManager', label: '客户经理', placeholder: '请输入客户经理' },  
					{ prop: 'followStatus', label: '跟进状态', placeholder: '请输入跟进状态' },  
					{ prop: 'industry', label: '所属行业', placeholder: '请输入所属行业' },  
					{ prop: 'clientProperty', label: '客户属性', placeholder: '请输入客户属性' },  
					{ prop: 'lastCommunicationDate', label: '最后沟通时间', placeholder: '请选择日期', type: 'date' }  
				  ] ,
				tableData: [],
				addDialogVisible: false,
				editDialogVisible: false,
				newClientForm: {
					clientNumber: '',
					clientName: '',
					contactAddress: '',
					contactPerson: '',
					phoneNumber: '',
					clientManager: '',
					followStatus: '',
					industry: '',
					clientProperty: '',
					lastCommunicationDate: ''
				},
				editClientForm: {
					id:'',
					clientNumber: '',
					clientName: '',
					contactAddress: '',
					contactPerson: '',
					phoneNumber: '',
					clientManager: '',
					followStatus: '',
					industry: '',
					clientProperty: '',
					isDeleted:'',
					lastCommunicationDate: ''
				},
				selectedRows: []
			};
		},
		created() {
			this.getData();
		},
		onLoad(){
			console.log('页面刷新')
			this.getData();
		},
		methods: {
			submitForm() {
				this.getData(1);
			},
			// 新增客户的业务逻辑  
			addClient() {  
			  // 这里可以添加或者调用新增客户的 API  
			  console.log('新增客户:', this.currentForm);  
			  // 例如：api.addClient(this.currentForm).then(...)  
			},
			// 打开弹窗  
			openDialog(isEdit, clientData) {  
				console.log(isEdit);
			  if (isEdit) {  
				// this.$refs.customerFormDialog.openDialog(true, clientData); 
				const clientEditData = { ...clientData };  
				  uni.navigateTo({  
					url: `/pages/customer/customerEditForm/index?isEdit=true&clientData=${encodeURIComponent(JSON.stringify(clientEditData)  
					)}`  
				  });   
			  } else {  
				  uni.navigateTo({  
					url: `/pages/customer/customerEditForm/index?isEdit=false`  
				  }); 
			  }
			},  
			// 分页触发
			changePage(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			formatDate(date) {
				if (!date) return '';
				// 假设日期格式为 YYYY-MM-DD，将其格式化为 YYYY/MM/DD  
				return date.replace(/-/g, '/');
			},
			formatPhone(phone) {
				if (!phone) return '';
				// 假设电话号码是 11 位数字，格式化为 123-4567-8901  
				return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
			},
			// 导出  
			handleExport() {
				this.download('client/ReturnDollar/export', {
					...this.formData
				}, `registration_${new Date().getTime()}.xlsx`);
			},
			
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				if (pageCurrent){
					this.formData.pageNum = pageCurrent;
				}
				this.pageCurrent = pageCurrent
				list(this.formData).then(response => {
					this.tableData = response.rows;
					this.total = response.total;
					this.loading = false
				});
			},
			
			// 删除行  
			deleteRow(row) {
				uni.showModal({
					title: '警告',
					content: `确定删除 ${row.clientNumber} 吗?`,
					success: (res) => {
						if (res.confirm) {
							this.editClientForm.id=row.id;
							this.editClientForm.isDeleted = '1';
							update(this.editClientForm).then(response => {
								if (response.msg === '操作成功') {
									uni.showToast({
										title: '修改成功',
										icon: 'success'
									});
								}
							}); 
							this.tableData = this.tableData.filter(item => item !== row);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
		}
	};
</script>
<style scoped>  
.dialog-container {  
  background: #ffffff;  
  padding: 30rpx;  
  border-radius: 16rpx;  
  width: 86%;  
  max-height: 80vh;  
  overflow-y: auto;  
}  

.dialog-title {  
  font-size: 36rpx;  
  color: #333333;  
  font-weight: bold;  
  margin-bottom: 20rpx;  
  text-align: center;  
}  

.form-body {  
  display: flex;  
  flex-wrap: wrap;  
  gap: 20rpx;  
}  

.form-row {  
  width: 48%; /* 每行宽度占50%，两栏对齐 */  
  margin-bottom: 20rpx;  
}  

.form-label {  
  font-size: 28rpx;  
  color: #606266;  
  margin-bottom: 8rpx;  
}  

.form-input {  
  height: 60rpx;  
  padding: 0 20rpx;  
  border: 1rpx solid #dcdfe6;  
  border-radius: 8rpx;  
  font-size: 28rpx;  
}  

.dialog-footer {  
  margin-top: 20rpx;  
  display: flex;  
  justify-content: space-between;  
  gap: 20rpx;  
}  

.uni-button {  
  flex: 1;  
  height: 60rpx;  
  line-height: 60rpx;  
  font-size: 28rpx;  
  text-align: center;  
  border-radius: 8rpx;  
}  

.cancel {  
  background-color: #e5e5e5;  
  color: #333333;  
}  

.confirm {  
  background-color: #409eff;  
  color: #ffffff;  
}  
.uni-container {  
	padding: 20rpx;  
	background: #f9f9f9;  
	min-height: 100vh;  
}  

.uni-toolbar {  
	display: flex;  
	gap: 20rpx;  
	margin-bottom: 20rpx;  
}  



.primary {  
	background-color: #409eff;  
	color: #fff;  
	border: none;  
}  

.default {  
	background-color: #ffffff;  
	color: #333;  
	border: 1rpx solid #ddd;  
}  

.danger {  
	background-color: #f56c6c;  
	color: #fff;  
}  

.search {  
	height: 64rpx;  
	background-color: #00c46c;  
	color: #fff;  
}  

.uni-filter-box {  
	display: flex;  
	flex-wrap: wrap;  
	margin-bottom: 20rpx;  
	background: #fff;  
	padding: 20rpx;  
	border-radius: 8rpx;  
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);  
}  

.uni-filter-item {  
	flex: 1;  
	display: flex;  
	flex-direction: column;  
	margin-right: 20rpx;  
}  

.uni-filter-label {  
	font-size: 26rpx;  
	color: #606266;  
	margin-bottom: 12rpx;  
}  

.uni-input {  
	height: 60rpx;  
	padding: 0 16rpx;  
	line-height: 60rpx;  
	border: 1rpx solid #dcdfe6;  
	border-radius: 4rpx;  
	font-size: 28rpx;  
	color: #606266;  
}  

.uni-table {  
	margin-top: 20rpx;  
	background: #fff;  
	border-radius: 8rpx;  
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);  
}  

.uni-pagination-box {  
	margin-top: 20rpx;  
	text-align: center;  
}  

.dialog-content {  
	padding: 40rpx;  
}  

.dialog-title {  
	text-align: center;  
	font-size: 32rpx;  
	font-weight: 600;  
	margin-bottom: 20rpx;  
	color: #303133;  
}  

.form-content {  
	display: flex;  
	flex-direction: column;  
	gap: 20rpx;  
}  

.form-row {  
	display: flex;  
	flex-direction: column;  
}  

.form-label {  
	font-size: 28rpx;  
	color: #606266;  
	margin-bottom: 8rpx;  
}  

.dialog-footer {  
	display: flex;  
	justify-content: flex-end;  
	gap: 20rpx;  
	padding-top: 20rpx;  
}  
</style>  
